<template>
    <button class="pe-button" :class="[
        typeArr.includes(type) ? `pe-button-type-${type}` : '',
        round ? 'pe-button-round' : '',
        circle ? 'pe-button-circle' : '',
        `pe-button-size-${size}`]" :style="[color || disabled || loading ? {
            '--pe-button-hover-bg-color': hoverBgColor,
            '--pe-button-border-color': bgColor,
            '--pe-button-bg-color': bgColor,
            '--pe-button-text-color': textColor
        } : {}, { cursor: disabled || loading ? 'not-allowed' : 'pointer' }]" :disabled="disabled">
        <i v-if="loading" class="pe-icon pe-button-icon is-loading" :style="{ marginRight: prefixIcon ? '5px' : 0 }">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path fill="currentColor"
                    d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z">
                </path>
            </svg>
        </i>
        <span v-if="prefixIcon" class="pe-button-icon">
            <prefixIcon class="pe-icon" />
        </span>
        <!-- 定义插槽用于让用户自定义按钮的内容 -->
        <div class="pe-button-content" v-if="defaultSlot">
            <slot></slot>
        </div>
        <span v-if="suffixIcon" class="pe-button-icon">
            <suffixIcon class="pe-icon" />
        </span>
    </button>
</template>

<script setup lang="ts">
import { ref, watch, useSlots, Component } from 'vue'
import { hexToRgb } from '../../utils/colorUtils'

const typeArr = ["primary", "success", "info", "warning", "error"]

/**
 * @param type 按钮类型
 * @param round 是否圆角
 * @param color 按钮颜色
 * @param circle 是否为圆形按钮
 * @param size 按钮尺寸
 * @param prefixIcon 头部图标
 * @param suffixIcon 尾部图标
 * @param disabled 是否可点击
 * @param loading 等待动画
 */

interface Props {
    type?: "primary" | "success" | "info" | "warning" | "error" | '',
    round?: boolean,
    color?: string,
    circle?: boolean,
    size?: 'default' | 'large' | 'small',
    prefixIcon?: Component,
    suffixIcon?: Component,
    disabled?: boolean,
    loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    type: '',
    round: false,
    color: "",
    circle: false,
    size: "default",
    disabled: false,
    loading: false,
});

// 判断插槽是否有值
const defaultSlot = useSlots().default

// 计算颜色
const hoverBgColor = ref<string>("")
const textColor = ref<string>("")
const bgColor = ref<string>(props.color)

watch(props, (newProps) => {

    // 按钮颜色
    if (newProps.color) {
        let color: string = newProps.color
        bgColor.value = color
        if (color.includes("#")) {
            color = hexToRgb(newProps.color)
        }
        let colorArr: number[] = []
        color = color.trim().replace(" ", "").replace(")", "")
        if (color.includes("rgba")) {
            color = color.replace("rgba(", "")
        } else {
            color = color.replace("rgb(", "")
        }
        colorArr = color.split(",").map(Number)
        const textColorArr = colorArr.map(item => 255 - item)
        const grayLevel: number = textColorArr[0] * 0.299 + textColorArr[1] * 0.587 + textColorArr[2] * 0.114;
        if (grayLevel >= 150) {
            textColor.value = "#ffffff"
        } else {
            textColor.value = "var(--pe-color-text)"
        }
        const colorHoverArr = colorArr.map((item, index) => {
            if (index === 1 || index === 2) {
                return item > 127 ? item - 100 : item + 100
            }
            return item
        })
        const colorDisabledArr = colorArr.map((item, index) => {
            if (index === 1 || index === 2) {
                return item > 127 ? item - 128 : item + 128
            }
            return item
        })
        if (colorArr.length > 3) {
            hoverBgColor.value = `rgba(${colorHoverArr.join(",")})`
            if (newProps.disabled) {
                bgColor.value = `rgba(${colorDisabledArr.join(",")})`
                hoverBgColor.value = bgColor.value
            }
        } else {
            hoverBgColor.value = `rgb(${colorHoverArr.join(",")})`
            if (newProps.disabled) {
                bgColor.value = `rgb(${colorDisabledArr.join(",")})`
                hoverBgColor.value = bgColor.value
            }
        }
    } else {
        if (newProps.disabled) {
            if (newProps.type) {
                bgColor.value = `var(--pe-color-hover-${newProps.type})`
                hoverBgColor.value = bgColor.value
            } else {
                bgColor.value = "var(--pe-color-hover-default)"
                hoverBgColor.value = bgColor.value
            }
        }
    }
}, { immediate: true })
</script>
<script lang="ts">
export default {
    name: "pe-button",
};
</script>
